<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix ="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.v2.jsp" %>
		<style>		.load_bg{background:#000;opacity:0.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;}
		.load_img{left:50%;top:180px;position:fixed;height:50px;overflow:hidden;z-index:20000;}
		</style>
	</head>
<body  class="no-skin">
<div  class="load_bg"></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img"/>

<div class="page-content" style="padding:0">
<div id="test"></div>
	<div class="page-header" style="margin-bottom:0px;padding-bottom:10px;">
	
		<h1 id="fu_name">
			
		</h1>
	</div>
	<form id="queryForm" >
	<div class="page-content-area">
		<div class="row">
			<div class="col-sm-12">
				<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;">
					<div class="widget-header widget-header-blue widget-header-flat">
						<h4 class="widget-title" id ="showTitle"></h4>

						<div class="widget-toolbar">
							<a href="#" data-action="collapse">
								<i class="ace-icon fa fa-chevron-up"></i>
							</a>
						</div>
					</div>

				</div><!-- /.widget-box -->
			</div><!-- /.col-sm-12 -->
				<div class="col-md-12 center">
				<div class="clearfix form-actions">
				
					<button class="btn btn-purple  no-border" type="button" name="btn-query" onclick="query_any()" id="btn-query">
						<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
						查询
					</button>
					&nbsp;&nbsp;&nbsp;
					<button class="btn btn-grey  no-border" type="reset">
						<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
						重置
					</button>
					
				  </div>
		   </div>
		</div><!-- /.row -->
				 
		
		<div class="row">
			<div class="col-xs-12">
				<table id="jquery-table201" class="table table-striped table-bordered table-hover">			
				</table>
			</div>
		</div>
	</div><!-- /.page-content-area -->
	
	</form>
	<div class="page-content-area">
		<div class="row">
			<div class="col-xs-12">
				<table id="jquery-table201" class="table table-striped table-bordered table-hover">			
				</table>
			</div>
		</div>
	</div><!-- /.page-content-area -->
</div><!-- /.page-content -->

<%@ include file="/common/common-js.jsp" %>
<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
<script type="text/javascript" src="${ctx}/statistics/homepage/comm.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
var requesturl = "http://xmiles.cn/stat_service/common";
//var requesturl = "http://localhost:8080/stat_service/common";
var platform = '';
var interface_id = getQueryString('interface_id'); 
var jsonStr = getQueryString('json');
jsonStr = JSON.parse(jsonStr);
var url = jsonStr.url.replace(new RegExp("andTran","gm"),"&");
	 
function getQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 	var r = window.location.search.substr(1).match(reg);
	if (r != null) return decodeURI(r[2]); return null;
	
};

//查询
function query_any(){
	if(jqTable201 != null){
	    jqTable201.fnDraw();
	}else{
		loaddata();
	}	
};

$(function(){
	loaddata();
	//时间控件
});

var jqTable201 = null;

var loaddata = function(){
	$('.load_bg,.load_img').show();
	jQuery(function($) {
	  $('.dataTables_wrapper').css('display', 'none');
      //详情统计
      if (jqTable201 != null) {
  	  $('#jquery-table201_wrapper').css('display','block');
  	  jqTable201.fnDraw();
  	  		return;
  	  		}
        	jqTable201 = $('#jquery-table201').dataTable( {
        		"columnDefs": [
        		  		    	
        		  		    	{
        		  		    		  "title":"请求时间",
        		  		    		  "name":"time",
        		  		    		  "data": "time",
        		  		    	  	  "targets": [0], 
        		  		    	  	  "bSortable": true,
        							  "class": "center",
        		   		    	  	  "width": "300px"
        		  		    	},
        		  		    	{
        		  		    		  "title":"请求链接",
        		  		    		  "name":"request_url",
        		  		    		  "data": "request_url",
        		  		    	  	  "targets": [1], 
        		  		    	  	  "bSortable": false,
        							  "class": "left"
        		  		    	},
        		  		    	{
        		  		    		  "title":"消息体大小",
        		  		    		  "name":"body_bytes_sent",
        		  		    		  "data": "body_bytes_sent",
        		  		    	  	  "targets": [2], 
        		  		    	  	  "bSortable": true,
        							  "class": "center",
        		   		    	  	  "width": "300px"
        		  		    	},
        		  		    	{
        		  		    	 	  "title":"消息大小",
        		  		    	 	  "name":"bytes_sent",
        		  		    	 	  "data": "bytes_sent",
        		  		    	  	  "targets": [3],
        		  		    	 	  "bSortable": true,
        							  "class": "center",
        		   		    	 	  "width": "300px",
        		  		    	},
        		  		    	{
        				    	 	  "title":"响应时间",
        				    	 	  "name":"upstream_response_time",
        				    	 	  "data": "upstream_response_time",
        				    	  	  "targets": [4],
        				    	 	  "bSortable": true,
        							  "class": "center",
        		 		    	 	  "width": "300px",
        				    	},
        		  		    	{
        				    	 	  "title":"请求时间",
        				    	 	  "name":"request_time",
        				    	 	  "data": "request_time",
        				    	  	  "targets": [5],
        				    	 	  "bSortable": true,
        							  "class": "center",
        		 		    	 	  "width": "300px",
        				    	},
        		  		    	{
        				    	 	  "title":"次数",
        				    	 	  "name":"count",
        				    	 	  "data": "count",
        				    	  	  "targets": [6],
        				    	 	  "bSortable": true,
        							  "class": "center",
        		 		    	 	  "width": "300px",
        				    	},
        		  		    	{
        				    	 	  "title":"状态码",
        				    	 	  "name":"status",
        				    	 	  "data": "status",
        				    	  	  "targets": [7],
        				    	 	  "bSortable": false,
        							  "class": "center",
        		 		    	 	  "width": "300px",
        				    	}
        		  		    	 
        		  		  	],
  			"sAjaxSource": requesturl,
  			"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
			     	var data = $('#queryForm').serializeObject();
  		   			aoData = JSON.stringify(aoData).replace(new RegExp("\/\/","gm"),"");
  		   			aoData = JSON.parse(aoData);
  		   			data.aoData = aoData;
  					var test =  JSON.stringify(data);
  					test = test.slice(1,test.length);
  					$.ajax({
  						"type": "POST",
  						"dataType": 'json',
  						"url": sSource,
  						"data": '{"data":{"databean":{"interface_id":"'+interface_id+'","url":"' + url + '",' + test + '},"shandle":"0","handle":"0"}',
						"timeout":"50000",
  						"success": function(resp){
  							$("#showTitle").html(resp.title);
  					  		console.log(resp);
  							fnCallback(resp);
  							initListPage();
  						},		
  						"error": function(XMLHttpRequest, textStatus, errorThrown) {
  						    console.log("error : " + textStatus);
							$('body').append("error : " + textStatus);
  						},
						"complete":function(){
							$(".load_bg,.load_img").hide();
						}
  										
  				  });
                    $.ajaxSetup({ 
                        xhrFields: { withCredentials: false }, 
                        crossDomain: true 
                    });
  			},
  			
  			"sScrollXInner": "100%",
  			"bRetrieve": true,
  			"sScrollY": "100%",//如果不设置，IE会有问题
  		    "aaSorting": [[0,"desc"]] ,
  		    "sPaginationType": "full_numbers",//设置分页按钮
       		"bStateSave": true,
            "bSort":true	
        	});
	});
}
	
</script>
		
</body>
</html>
